<script setup lang="ts">
import { computed } from 'vue'
import type { ViewChartBarProps } from './type.d'
import { DEFAULT_DATASET, createOptions } from './index'

defineOptions({
  name: 'ViewChartBar',
  inheritAttrs: false,
})
const props = withDefaults(
  defineProps<ViewChartBarProps>(),
  {
    option: () => ({} as any),
    dataset: () => DEFAULT_DATASET as any,
    legendPosition: 'top',
    legend: true,
  },
)

const { theme } = storeToRefs(useDesignStore())

const handlerOption = computed(() =>
  createOptions(props, theme.value),
)
</script>

<template>
  <b-chart
    :option="handlerOption"
    class="view-chart-bar box-border"
    v-bind="$attrs"
  />
</template>
